<template>
    <n-space>
        <n-select
            placeholder="筛选班级"
            v-model:value="classId"
            :options="classIdOptions"
        />
        <n-select
            placeholder="筛选实训"
            v-model:value="trainingId"
            :options="trainingIdOptions"
        />
        <n-input
            placeholder="输入学号或者姓名进行筛选"
            v-model:value="textScreening"
        />
    </n-space>
    <n-data-table
        :columns="columns"
        :data="data"
        :bordered="false"
        children-key="noChildren"
    />
</template>

<script setup>
import {useTeacherStore} from "@/stores/teacher";

const teacher = useTeacherStore()
const props = defineProps(['addBreadcrumbList', "training_id", "class_id", "setStudent"])
const columns = [
    {
        title: "学号",
        key: "student_id"
    },
    {
        title: "姓名",
        key: "name"
    },
    {
        title: "任务数",
        key: "task_number"
    },
    {
        title: "总分",
        key: "all_score",
    },
    {
        title: "操作",
        key: "op",
        render(row) {
            return h(
                "span",
                {
                    strong: true,
                    tertiary: true,
                    size: "small",
                    onClick: () => openPersonal(row)
                },
                {default: () => "查看详情"}
            );
        }
    },
]

teacher.updateClassGrade(props.training_id, props.class_id)

const openPersonal = (row) => {
    props.addBreadcrumbList("个人成绩")
    props.setStudent(row.id)
}


// 筛选框
const classId = ref(props.class_id)
const trainingId = ref(props.training_id)
const textScreening = ref("")
// 监视筛选框
watch(classId, () => {
    trainingId.value = trainingIdOptions.value[0].value
    console.log(trainingIdOptions.value[0].value)
})
watch(trainingId, () => {
    teacher.updateClassGrade(trainingId.value, classId.value)
})
// 计算出筛选框
const classIdOptions = computed(() => {
    let array = []
    for (let i of teacher.allGrade) {
        console.log(i)
        array.push(
            {label: i.training_class, value: i.class_id}
        )
    }
    return Array.from(new Set(array.map(JSON.stringify)), JSON.parse);
})
const trainingIdOptions = computed(() => {
    let array = []
    for (let i of teacher.allGrade) {
        if (classId.value !== null && classId.value !== i.class_id) {
            continue
        }
        array.push(
            {label: i.name, value: i.id}
        );
    }
    return Array.from(new Set(array.map(JSON.stringify)), JSON.parse);
})

// 展示内容
const data = computed(() => {
    let array = []
    for (let i of teacher.classGrade) {
        if (i.name.indexOf(textScreening.value) !== -1 || i.student_id.indexOf(textScreening.value) !== -1) {
            array.push(i)
        }
    }
    return array
})
console.log(data)
</script>

<style scoped lang="less">
.n-space {
    margin-bottom: 10px;

    div {
        width: 200px;

    }
}
</style>